<template>
	<view class="load-more-box" v-show="params.init">
		<view class="no-data-box" :class="{ 'hide-body': componentType !== 'empty' }">
			<slot>
				<u-empty :mode="mode" :text="getText"></u-empty>
			</slot>
		</view>
		<!-- 只有一页而且数据量小于6就不显示 已加载结束 -->
		<template v-if="!(params.len < 8 && getStatus == 'nomore')">
			<view class="btn-box" :class="{ 'hide-body': componentType !== 'loadMore' }">
				<u-loadmore :status="getStatus" icon-type="flower" :load-text="loadText" color="#999999"
					@loadmore="loadMore" />
			</view>
		</template>
	</view>
</template>
<script>
	export default {
		props: {
			params: {
				type: Object,
				required: true,
				default: () => {
					return {}
				}
			}, // loading init len loadMore
			mode: {
				type: String,
				default: 'search'
			},
			loadMoreText: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				componentType: 'loadMore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '加载中...',
					nomore: '我是有底线的 QAQ~'
				}
			};
		},
		mounted() {
			this.loadText.loadmore = this.loadMoreText || '点击或上拉加载更多'
		},
		computed: {
			getStatus() {
				this.componentType = 'loadMore';
				if (this.params.loading) return 'loading';
				if (this.params.init) {
					if (this.params.len > 0) {
						return this.params.loadMore ? 'loadmore' : 'nomore';
					} else {
						this.componentType = 'empty';
						return 'nomore';
					}
				} else {
					return 'loadmore';
				}
			},
			getText() {
				if (this.params.emptyText) {
					return this.params.emptyText;
				} else {
					switch (this.mode) {
						case 'order':
							return '您当前没有订单呢';
						case 'search':
							return '暂无数据~';
						default:
							return '数据还在来的路上 QAQ';
					}
				}
			}
		},
		methods: {
			loadMore() {
				this.$emit('load');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.no-data-box {
		width: 100%;
		min-height: 700rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hide-body {
		display: none;
	}
</style>
